<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case-first</title>
    <link rel="stylesheet" href="style/common.css">
    <link rel="stylesheet" href="style/index.css">
</head>

<body style="padding: 1%;background-color: rgb(223, 208, 208);">
    <div class="inner">
        <div class="part-1">
            <h2>1.浮动-行内和块的转化</h2>
            <div class="content clearfix">
                <div class="example fl">
                    <span class="bb">我是行内元素bb</span>
                    <div class="aa">我是正常div块元素aa</div>
                    <span class="cc fl">我是浮动行内元素cc,</span>
                </div>
                <div class="tips fr">
                    <h4>>>行内元素：</h4>
                    <ul>
                        <li>行内元素只能容纳文本或者其他行内元素。宽度只与内容有关。</li>
                        <li>高，行高及外边距和内边距部分可改变。</li>
                    </ul>
                    <h4>>>块元素</h4>
                    <ul>
                        <li>度，行高以及外边距和内边距都可控制。</li>
                        <li>占据一整行。</li>
                        <li>它可以容纳内联元素和其他块元素。</li>
                    </ul>
                    <h4>【总结】</h4>
                    <p>行内元素设置成浮动之后转化为inline-block（行内块级元素）</p>
                </div>
            </div>

        </div>
        <div class="part-2">
            <h2>2.浮动塌陷</h2>
            <div class="content clearfix">
                <div class="example">
                    <div>div1</div>
                    <div>div2</div>
                    <div>div3</div>
                </div>
                <div class="tips">
                    父容器高度没有被撑起来，高度塌陷，原因：子元素都进行了浮动脱离了文档流，父元素也没有设置高度。
                </div>
            </div>
            <div class="content">
                <div class="tips">
                    <h4>【解决】:给浮动元素的父元素写入清除浮动clearfix</h4>
                </div>
                <div class="example clearfix">
                    <div>div1</div>
                    <div>div2</div>
                    <div>div3</div>
                </div>
            </div>
        </div>
        <div class="part-3">
            <h2>3.浮动-文字环绕</h2>
            <div class="content clearfix">
                <div class="example">
                    <div class="pic fl">图片</div>
                    <div>
                        【天安门一摄影师拍60多万张游客照】高源是天安门广场上的“名人”，17岁起就在这儿干，
                        40年里已经为各地来的游客拍了60多万张照片，他现在成了天安门广场上资历最老的摄影师，
                        还有一年多就要退休了。早期由于取照慢，都是请顾客留下地址，等照片洗出来后再寄过去。
                        由于游客地址书写错误等原因，慢慢攒下一大批被退回的照片。为了找照片主人网络查询、
                        实地走访、甚至惊动了当地派出所，“很多人搬家了，敲开门一看，已经不是照片上的人了。
                        也有人拿到失而复得的照片时，看起来并没有想象中的那么激动”。现在，这批照片大部分捐给了博物馆。
                    </div>
                </div>
                <div class="tips">
                    <h4>【总结】：给图片或指定div设置浮动即可</h4>
                </div>
            </div>

        </div>
        <div class="part-4">
            <h2>4.应用-新闻条布局</h2>
            <div class="content">
                <div class="pic"><img src="image/a.png" alt=""></div>
                <div class="example clearfix">
                    <ul>
                        <li><i>2020-10-01</i><span class="single-line">XXXXXXXXXXXXXXXXXXXXXXXX</span></li>
                        <li><i>2020-10-02</i><span class="single-line">XXXXXXXXXXXXXXXXXXXXXXXX</span></li>
                        <li><i>2020-10-03</i><span class="single-line">XXXXXXXXXXXXXXXXXXXXXXXX</span></li>
                    </ul>
                    <div class="tips">
                        <h4>【总结】time写在title前方，title设置左浮动和宽即可</h4>
                    </div>
                </div>
                <div class="example2 clearfix">
                    <div class="pic fl clearfix"><img src="image/b.png" alt=""></div>
                    <div class="words multi-line">
                        【天安门一摄影师拍60多万张游客照】高源是天安门广场上的“名人”，17岁起就在这儿干，
                        40年里已经为各地来的游客拍了60多万张照片，他现在成了天安门广场上资历最老的摄影师，
                        还有一年多就要退休了。早期由于取照慢，都是请顾客留下地址，等照片洗出来后再寄过去。
                        由于游客地址书写错误等原因，慢慢攒下一大批被退回的照片。为了找照片主人网络查询、
                        实地走访、甚至惊动了当地派出所，“很多人搬家了，敲开门一看，已经不是照片上的人了。
                        也有人拿到失而复得的照片时，看起来并没有想象中的那么激动”。现在，这批照片大部分捐给了博物馆。
                    </div>
                    <div class="tips">
                        <h4>【总结】图片设置左浮动，文字设置margin-left:"图片宽度+间隙宽度"即可</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>